<template>
	<view class="continer">
		<swiper class="banner" indicator-dots autoplay indicator-color="#fff" indicator-active-color="#c55a5c">
			<swiper-item v-for="carousel in carousels" :key="carousel.img">
				<image class="photo" :src="carousel.img" mode="" />
			</swiper-item>
		</swiper>
		<view class="news">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="new_logo">
						<u--image :src="new_logo" mode="aspectFit" bgColor="#ffffff" width="80px"
							height="37px"></u--image>
					</view>
				</u-col>
				<u-col span="9">
					<u-notice-bar :text="news" direction="column" icon="" mode="link" speed="250" bgColor="#fff"
						color="#000">
					</u-notice-bar>
				</u-col>
			</u-row>
		</view>
		<view class="menus">
			<u-grid :border="false" col="4">
				<u-grid-item class="menu" v-for="menu in menus" :key="menu.img">
					<u--image :src="menu.img" mode="aspectFit" bgColor="#ffffff" width="80px" height="37px"></u--image>
					<text class="grid-text">{{menu.info[0].value}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="recommen">
			<view class="title">精品推荐</view>
			<u-line></u-line>
			<u-grid col="2">
				<u-grid-item class="item" v-for="recommen in recommen_list" :key="recommen.id">
					<u--image :src="recommen.image" mode="aspectFit" bgColor="#ffffff" width="300rpx"
						height="300rpx"></u--image>
					<text class="name">{{recommen.store_name}}</text>
					<text class="ot_price">￥{{recommen.ot_price}}</text>
					<text class="price">￥{{recommen.price}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="recommen">
			<view class="title">热门榜单</view>
			<u-line></u-line>
			<u-grid col="3">
				<u-grid-item class="item" v-for="recommen in hot_list" :key="recommen.id">
					<u--image :src="recommen.image" mode="aspectFit" bgColor="#ffffff" width="200rpx"
						height="300rpx"></u--image>
					<text class="name">{{recommen.store_name}}</text>
					<text class="ot_price">￥{{recommen.ot_price}}</text>
					<text class="price">￥{{recommen.price}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="recommen">
			<view class="title">首发新品</view>
			<u-line></u-line>
			<u-grid col="2">
				<u-grid-item class="item" v-for="recommen in new_list" :key="recommen.id">
					<u--image :src="recommen.image" mode="aspectFit" bgColor="#ffffff" width="300rpx"
						height="300rpx"></u--image>
					<text class="name">{{recommen.store_name}}</text>
					<text class="ot_price">￥{{recommen.ot_price}}</text>
					<text class="price">￥{{recommen.price}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="recommen">
			<view class="title">促销单品</view>
			<u-line></u-line>
			<u-grid col="2">
				<u-grid-item class="item" v-for="recommen in sales_list" :key="recommen.id">
					<u--image :src="recommen.image" mode="aspectFit" bgColor="#ffffff" width="300rpx"
						height="300rpx"></u--image>
					<text class="name">{{recommen.store_name}}</text>
					<text class="ot_price">￥{{recommen.ot_price}}</text>
					<text class="price">￥{{recommen.price}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import { home } from '@/api/index'
	export default {
		data() {
			return {
				carousels: [],
				news: [],
				new_link: [],
				new_logo: '',
				menus: [],
				recommen_list: [],
				hot_list: [],
				new_list: [],
				sales_list: [],
			}
		},
		onLoad() {
			this.load_carousel();
			this.load_product();
		},
		methods: {
			//首页数据
			async load_carousel() {
				let { status, data } = await home.carousel();
				if (status === 200) {
					this.carousels = [...data.value['1676425779764001'].swiperConfig.list];
					data.value['1676425779764002'].listConfig.list.forEach((item) => {
						this.news.push(item.chiild[0].val);
						this.new_link.push(item.chiild[1].val);
					})
					this.new_logo = data.value['1676425779764002'].logoConfig.url;
					this.menus = [...data.value['1676425779764003'].menuConfig.list];
				}
			},
			//加载商品
			async load_product() {
				let { status: recommen_status, data: recommen_data } = await home.recommen(1, { page: 1, limit: 10 });
				if (recommen_status === 200) {
					this.recommen_list = [...recommen_data.list];
				}
				let { status: hot_status, data: hot_data } = await home.recommen(2, { page: 1, limit: 6 });
				if (hot_status === 200) {
					this.hot_list = [...hot_data.list];
				}
				let { status: new_status, data: new_data } = await home.recommen(3, { page: 1, limit: 4 });
				if (new_status === 200) {
					this.new_list = [...new_data.list];
				}
				let { status: sales_status, data: sales_data } = await home.recommen(4, { page: 1, limit: 4 });
				if (sales_status === 200) {
					this.sales_list = [...sales_data.list];
				}
			}
		}
	}
</script>

<style lang="scss">
	.continer {
		padding: 30rpx;
		background-color: #f5f5f5;

		.banner {
			border-radius: 20rpx;
			overflow: hidden;
		}

		swiper .photo {
			width: 709rpx;
			height: 392rpx;
		}

		.news {
			margin-top: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.new_logo {
				background-color: #fff;
			}
		}

		.menus {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.menu {
				font-size: 12rpx;
				margin-bottom: 20rpx;

				text {
					padding-top: 10rpx;
				}
			}
		}

		.recommen {
			margin: 20rpx 0;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.title {
				padding: 20rpx 0;
				text-align: center;
			}

			.item {

				.name {
					width: 300rpx;
					font-size: 24rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.ot_price {
					text-decoration: line-through 1rpx;
					font-size: 12rpx;
					color: #999;
				}

				.price {
					color: red;
					font-weight: 800;
				}
			}
		}
	}
</style>